<template>
    <div class="invalid-goods-wrapper" v-if="cartGoodsList && cartGoodsList.length && isCart">
        <div class="invalid-info">
            <span class="brief-info">以下{{ cartGoodsList.length }}件物品无法购买</span>
            <span class="check-reason-button" @click="checkReason">查看原因 <i class="iconfont icon-zhixiang"></i></span>
        </div>
        <div class="invalid-goods-brief">
            <div class="goods-thumbnail" v-for="goodsInfo in goodsList" :key="goodsInfo.id">
                <xe-image class="img" v-if="goodsInfo.img_url" :src="handleImgUrl(goodsInfo.img_url)" fit="blur" />
                <van-tag type="primary" class="goods-type ET tag" color="rgba(51, 51, 51, 0.6)"
                    v-if="goodsInfo.goods_tag_is_show">{{ goodsInfo.goods_tag }}</van-tag>
            </div>
            <template v-if="cartGoodsList.length > 4">•••</template>
        </div>
        <van-popup v-model="showGoodsDetail" position="bottom" :style="{ height: '64%' }" round>
            <div class="invalid-title ET2">无法购买的原因</div>
            <div class="invalid-goods-list">
                <div class="invalid-goods-area" v-for="goodsInfo in cartGoodsList" :key="goodsInfo.id"
                    @click="toDetail(goodsInfo.invalid_type, goodsInfo.spu_id)">
                    <goods-card :invalid="true" :invalidReason="goodsInfo | filterReason" :goodsInfo="goodsInfo">
                    </goods-card>
                </div>
            </div>
            <div class="popup-foot">
                <div @click="onClick" class="theme-customize-bg pupup-button">我知道了</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { GOODS_CONFIRM_INVALID_TYPE, GOODS_INVALID_TYPE } from "../../constants/constant.js"
    import GoodsCard from "../GoodsCard";
    import { Image as XeImage } from '@xiaoe/vant';
    import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";

    export default {
        components: {
            GoodsCard,
            XeImage
        },
        props: {
            isCart: {
                type: Boolean,
                default: false
            },
            cartInfo: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {
                showGoodsDetail: false,
            };
        },
        computed: {
            cartGoodsList() {
                return this.cartInfo?.data?.invalidGoodsList || [];
            },
            goodsList() {
                return this.cartGoodsList.slice(0, 4);
            },
        },
        filters: {
            filterReason(goodsInfo) {
                return GOODS_CONFIRM_INVALID_TYPE[goodsInfo.invalid_type] || '请点击前往商品详情页购买'
            }
        },
        methods: {
            checkReason() {
                this.showGoodsDetail = true;
            },
            onClick() {
                this.showGoodsDetail = false;
            },
            toDetail(invalidType, spuId) {
                let invalidReason = GOODS_INVALID_TYPE[invalidType] || '请点击前往商品详情页购买'
                if (invalidReason === '请点击前往商品详情页购买') {
                    this.$router.push({
                        path: `/goods_detail/${spuId}`
                    })
                }
            },
            handleImgUrl(url) {
                return replaceCDN(url, { width: 120 });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .invalid-goods-wrapper {
        padding: .32rem;
        margin-bottom: .16rem;
        background: #fff;
    }

    .invalid-info {
        display: flex;
        justify-content: space-between;
    }

    .check-reason-button {
        color: #999;
    }

    .invalid-goods-brief {
        margin-top: .24rem;
    }

    .goods-thumbnail {
        position: relative;
        display: inline-block;
        margin-right: .32rem;
        width: 1.28rem;
        height: 1.28rem;
        border-radius: 0.08rem;
        border: 1px solid #EBEBEB;
        overflow: hidden;

        .goods-type {
            position: absolute;
            right: 0.08rem;
            bottom: 0.08rem;
            font-size: 10px;
            text-size-adjust: none;
        }
    }

    .invalid-title {
        margin: .34rem 0;
        text-align: center;
        font-weight: 500;
    }

    .invalid-goods-list {
        padding: .32rem;
        height: calc(100% - 2.86rem);
        overflow-y: scroll;
    }

    .invalid-goods-area+.invalid-goods-area {
        margin-top: .24rem;
    }

    .popup-foot {
        background: #fff;
        padding: 0.16rem 0.28rem;
        border-top: 1px solid #eee;

        .pupup-button {
            color: #fff;
            border-radius: 0.4rem;
            padding: 0.2rem 0;
            text-align: center;
        }
    }
</style>